<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0531-JS作业2-返回顶部-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";}
		body{margin: 0;}
		.wrap{
			width: 100%;
			height: 9534px;
			background: #fff url("images/bilibili.jpg") no-repeat center top;
		}
		.mbox{
			position: relative;
			width: 1162px;
			height: 100%;
			margin: 0 auto;
		}
		.sbar{
			position: absolute;
			top: 232px;
			right: -58px;
			width: 50px;
			height: 660px;
			background: url("images/bb_00.png") no-repeat;
		}
		.btn{
			position: absolute;
			bottom: 0;
			width: 50px;
			height: 50px;
			background: url("images/bb_01.png") no-repeat;
			cursor: pointer;
		}
		.btn:hover{
			background: url("images/bb_02.png") no-repeat;
		}
		.tvico{
			position: absolute;
			left: -6px;
			bottom: -62px;
			width: 62px;
			height: 45px;
			background: url("images/bb_03.png") no-repeat;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<section class="mbox">
			<aside class="sbar">
				<div class="btn"></div>
				<div class="tvico"></div>
			</aside>
		</section>
	</section>
</body>
<script>
	var oSbar = document.getElementsByClassName('sbar')[0],
		oBtn = document.getElementsByClassName('btn')[0],
		t,timer;
	
    window.onscroll= function(){//页面滚动时 改变右侧导航栏的位置
        t = document.documentElement.scrollTop||document.body.scrollTop;
        if(t > 120){
            oSbar.style.top = `${t+112}px`;
        }else{
            oSbar.style.top = '232px';
        }
    };
	
    oBtn.onclick = function(){//点击置顶按钮
        timer = setInterval(function(){
            t = document.documentElement.scrollTop||document.body.scrollTop;
            if(t > 0){
                scrollTo(0,t-100);
            }else{
                clearInterval(timer);
            }
        },1000/60);
    };
    
</script>
</html>